<template>
  <a-dropdown>
    <span class="ant-dropdown-link">
      <a-avatar :size="32">
        <template #icon><UserOutlined /></template>
      </a-avatar>
      {{ name }}
    </span>
    <template #overlay>
      <a-menu @click="handleClickMenu">
        <a-menu-item key="updatePwd">
          <LockOutlined style="padding-right: 4px"/>
          <a href="javascript:;">修改密码</a>
        </a-menu-item>
        <a-menu-item key="logout">
          <LogoutOutlined style="padding-right: 4px"/>
          <a href="javascript:;">退出系统</a>
        </a-menu-item>
      </a-menu>
    </template>
  </a-dropdown>
</template>
<script setup lang="ts">
import { UserOutlined,LogoutOutlined,LockOutlined } from '@ant-design/icons-vue';
import { message } from 'ant-design-vue';
import { computed } from 'vue';
import { useRouter } from 'vue-router';
import { useUserStore } from '../store/modules/user';
const userStore = useUserStore()
const router = useRouter()
const name = computed<string>(()=>{
  return userStore.getName
})
const handleClickMenu = (e: any) => {
  if(e.key == 'logout') {
    handleLogout()
  } else {
    message.success('正在开发中……')
  }
}
const handleLogout = () =>{
  userStore.logout().then(()=>{
    router.push({
      name: 'login'
    })
  })
}


</script>
<style lang="less" scoped>

</style>